<template>
  <div class="app-container">
    <el-collapse class="info-card" v-model="activeName">
      <el-collapse-item name="1">
        <template v-slot:title>
          <div class="quick-tips">
            <el-icon class="el-icon-info" style="margin-right: 10px"/>
            小贴士
          </div>
        </template>
        <ul class="list" style="list-style-type: decimal;">
          <li>
            实名认证直接影响账号和资源的归属，如果企业用户使用个人信息进行实名认证，后续出现人员变动或账号纠纷时，可能会影的企业用户的业务，甚至造成经济损失，在进行实名认证之前，请确认您在腾讯云购买和使用的资源是属于个人还是企业。
            <el-link type="primary" style="font-size: 12px" @click="()=>{
              certificationTips=true
            }">
              查看个人认证和企业认证区别
            </el-link>
          </li>
          <li>实名认证后若需要变更为其他类型或变更主体，请参考</li>
        </ul>
        <ul>
          <li>
            <el-link type="primary">实名认证企业身份A变更为企业身份B</el-link>
          </li>
          <li>
            <el-link type="primary">个人实名认证修改为企业认证</el-link>
          </li>
          <li>
            <el-link type="primary">工商类型企业更新企业法人信息</el-link>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-card shadow="always">
      <h4 class="h4" v-if="dataInfo.companyCertified==0">您还未完成实名认证 <span style="margin-left: 20px"><el-link
        type="primary" underline
        @click="()=>{$router.push({path:'/unitManager/authentication-modify'})}">完成实名认证></el-link></span></h4>
      <h4 class="h4" v-else>{{ dataInfo.unitType == 1 ? '您已经完成了个人实名认证' : '您已经完成了企业的实名认证' }} <span
        style="margin-left: 20px"><el-link
        type="primary" underline
        @click="()=>{$router.push({path:'/unitManager/authentication-modify'})}">修改认证主体></el-link></span></h4>
      <div v-if="dataInfo.companyCertified==1">
        <el-row v-if="dataInfo.unitType==2">
          <el-col :offset="1" :span="4">
            <img src="../../../assets/images/unit/certification.png" height="64" width="64"/>
          </el-col>
          <el-col :span="18">
            <el-row class="certification-info">
              <el-col :span="2" class="label">企业名称</el-col>
              <el-col :span="4" :offset="1">{{ dataInfo.customerUnitName }}</el-col>
            </el-row>
            <el-row class="certification-info">
              <el-col :span="2" class="label">认证地区</el-col>
              <el-col :span="4" :offset="1">中国大陆</el-col>
            </el-row>
            <el-row class="certification-info">
              <el-col :span="2" class="label">机构代码</el-col>
              <el-col :span="4" :offset="1">{{ dataInfo.socialCreditCode }}</el-col>
              <el-col :span="6">
                <el-link type="primary" underline
                         @click="()=>{$router.push({path:'/unitManager/authentication-modify'})}">
                  机构代码不完整或不正确?点此修改
                </el-link>
              </el-col>
            </el-row>
            <el-row class="certification-info">
              <el-col :span="2" class="label">认证时间</el-col>
              <el-col :span="4" :offset="1">{{ parseTime(dataInfo.createTime) }}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="dataInfo.unitType==1">
          <el-col :offset="1" :span="4">
            <img src="../../../assets/images/unit/certification.png" height="64" width="64"/>
          </el-col>
          <el-col :span="18">
            <el-row class="certification-info">
              <el-col :span="2" class="label">用户姓名</el-col>
              <el-col :span="4" :offset="1">{{ dataInfo.personName }}</el-col>
            </el-row>
            <el-row class="certification-info">
              <el-col :span="2" class="label">认证地区</el-col>
              <el-col :span="4" :offset="1">中国大陆</el-col>
            </el-row>
            <el-row class="certification-info">
              <el-col :span="2" class="label">身份证件号</el-col>
              <el-col :span="4" :offset="1">{{ dataInfo.comContactIdCard }}</el-col>
              <el-col :span="6">
                <el-link type="primary" underline
                         @click="()=>{$router.push({path:'/unitManager/authentication-modify'})}">
                  身份证号码不完整或不正确?点此修改
                </el-link>
              </el-col>
            </el-row>
            <el-row class="certification-info">
              <el-col :span="2" class="label">认证时间</el-col>
              <el-col :span="4" :offset="1">{{ parseTime(dataInfo.createTime) }}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog :visible.sync="certificationTips" title="认证信息">
      <el-descriptions class="margin-bottom" title="账号归属区别" :column="3" border direction="vertical">
        <el-descriptions-item label="类型" :span="1">
          实名区别
        </el-descriptions-item>
        <el-descriptions-item label="个人实名认证" :span="1">
          <div>可参加个人类运营活动</div>
          <div>无法申请增值税专用发票</div>
        </el-descriptions-item>
        <el-descriptions-item label="企业实名认证" :span="1">
          <div>可参加企业类运行活动</div>
          <div>可以申请增值税专用发票</div>
        </el-descriptions-item>
      </el-descriptions>
      <el-alert
        :closable="false"
        title="实名认证直接影响账号和资源的归属，如果企业用户使用个人信息进行实名认证，后续出现人员变动或账号纠纷时，可能会影响企业用户的业务，甚至造成经济损失。在进行实名认证之前，请确认您在腾讯云购买和使用的资源是属于个人还是企业。"
        show-icon
        type="warning">
      </el-alert>
    </el-dialog>
  </div>
</template>

<script>
import {getVehcusunitByDeptId} from "@/api/merunit/vehmerunit";
import {Message} from "element-ui";
import data from "@/views/system/dict/data.vue";

export default {
  name: "authentication",
  computed: {
    data() {
      return data
    },
    deptId() {
      return this.$store.getters.deptId;
    }
  },
  data() {
    return {
      certificationTips: false,
      activeName: '1',
      dataInfo: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      getVehcusunitByDeptId(this.deptId).then(res => {
        if (res.code == 200) {
          this.dataInfo = res.data
        } else {
          Message.error(res.msg)
        }
      })
    }
  }
}
</script>


<style scoped lang="scss">
.info-card {
  position: relative;
  padding: 10px 20px;
  margin-bottom: 25px;

  .list {
    li:not(:last-child) {
      margin-bottom: 20px;
    }
  }


  .content {
    font-size: 12px;
  }
}

.certification-info {
  margin-bottom: 15px;
  font-size: 15px;

  .label {
    color: #97a8be;
  }
}

.quick-tips {
  position: relative;

  > .info-icon {
    top: 1px;
    position: absolute;
    left: -18px;
  }
}

</style>
<style>
.el-collapse {
  border: 1px solid #e6ebf5;
}

.el-collapse-item__header {
  border-bottom: 0;
}

.el-collapse-item__wrap {
  border-bottom: 0;
}

.margin-bottom {
  margin-bottom: 25px;
}
</style>
